<template>
  <div class="category">
    <div class="warn-box">
      <svg-icon
        style="margin-right:17px"
        icon-class="warn"
        :size="20"
      />
      <p><span>图片要求！</span><br />图片宽度650px，高度220px。</p>
    </div>
    <template v-for="(item, index) in dataList">
      <category-form
        :key="index"
        :form-data="item"
        :title="`推荐位${index+1}`"
        @upSortItem="upSortItem(index)"
        @downSortItem="downSortItem(index)"
        @deleteItem="deleteItem(index)"
      ></category-form>
    </template>
    <div
      class="add-div"
      @click="addItem"
    >
      <i class="el-icon-plus"></i>添加品类商品推荐位
    </div>
  </div>
</template>

<script>
import categoryForm from "../components/categoryForm";
export default {
  components: { categoryForm },
  data() {
    return {
      dataList: []
    }
  },
  methods: {
    // 升序
    upSortItem(index) {
      if (index === 0) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index - 1]);
      this.$set(this.dataList, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.dataList.length - 1) {
        return;
      }
      let item = this.dataList[index];
      this.$set(this.dataList, index, this.dataList[index + 1]);
      this.$set(this.dataList, index + 1, item);
    },
    // 删除推荐位
    deleteItem(index) {
      this.dataList.splice(index, 1);
    },
    addItem() {
      this.dataList.push({
        main: {
          img: '',
          title: '',
          jumpType: '',
          jumpUrl: '',
          goods: {}
        },
        goods: []
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
